<!DOCTYPE html>
<html class="no-js" lang="" xmlns:th="http://www.thymeleaf.org" xmlns:v-for="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>统计年鉴</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/x-icon" href="media/favicon.png">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="dependencies/bootstrap/css/bootstrap.min.css">
    <!-- FontAwesome CSS -->
    <link rel="stylesheet" href="dependencies/fontawesome/css/all.min.css">
    <!-- Flaticon CSS -->
    <link rel="stylesheet" href="dependencies/flaticon/flaticon.css">
    <!-- Owl Carousel CSS -->
    <link rel="stylesheet" href="dependencies/owl.carousel/css/owl.carousel.min.css">
    <link rel="stylesheet" href="dependencies/owl.carousel/css/owl.theme.default.min.css">
    <!-- Animated Headlines CSS -->
    <link rel="stylesheet" href="dependencies/jquery-animated-headlines/css/jquery.animatedheadline.css">
    <!-- Magnific Popup CSS -->
    <link rel="stylesheet" href="dependencies/magnific-popup/css/magnific-popup.css">
    <!-- Animate CSS -->
    <link rel="stylesheet" href="dependencies/animate.css/css/animate.min.css">
    <!-- Meanmenu CSS -->
    <link rel="stylesheet" href="dependencies/meanmenu/css/meanmenu.min.css">
    <!-- Site Stylesheet -->
    <link rel="stylesheet" href="assets/css/app.css">

    <!-- Google Web Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i&display=swap" rel="stylesheet">

</head>

<body class="sticky-header">
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!-- ScrollUp Start Here -->
<a href="#wrapper" data-type="section-switch" class="scrollup">
    <i class="fas fa-angle-double-up"></i>
</a>
<!-- ScrollUp End Here -->
<!-- Preloader Start Here -->
<div id="preloader"></div>
<!-- Preloader End Here -->
<div id="wrapper" class="wrapper">

    <!--=====================================-->
    <!--=            Header Start           =-->
    <!--=====================================-->
    <header class="header">
        <div id="rt-sticky-placeholder"></div>
        <div id="header-menu" class="header-menu menu-layout2">
            <div class="container">
                <div class="row d-flex align-items-center">
                    <div class="col-lg-2">
                        <div class="logo-area">
                            <a href="/" class="temp-logo">
                                <img src="media/logo.png" alt="logo" class="img-fluid">
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-7 d-flex justify-content-end">
                        <nav id="dropdown" class="template-main-menu">
                            <ul>
                                <li>
                                    <a href="/" class="btn-outline-dark">主页</a>
                                </li>
                                <li>
                                    <a href="/area" class="btn-outline-dark">地区差异</a>
                                </li>
                                <li>
                                    <a href="/year" class="btn-outline-dark">年度变化</a>
                                </li>
                                <li>
                                    <a href="/websites" class="btn-outline-dark">相关网站</a>
                                </li>
                                <li>
                                    <a href="/news" class="btn-outline-dark">相关新闻</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="col-lg-3 d-flex justify-content-end">
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="display: contents">
                            <ul class="nav navbar-nav navbar-right">
                                <li class="dropdown" th:if="${session.username!=null}">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                                       aria-expanded="false">
                                        <span th:text="${session.username}"></span>
                                        <span class="caret"></span>
                                        <!--                            <span th:text="${session.user.getName()}"></span>-->
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="/manage">管理数据库</a></li>
                                        <li><a href="/logout">退出登录</a></li>
                                    </ul>
                                </li>
                                <li th:if="${session.username==null}">
                                    <a href="/login">登录</a>
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <!--=====================================-->
    <!--=        Inner Banner Start         =-->
    <!--=====================================-->
    <section class="inner-page-banner" data-bg-image="media/banner/banner1.jpg">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="breadcrumbs-area">
                        <h1>地区差异</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--=====================================-->
    <!--=          Search Box Start         =-->
    <!--=====================================-->
    <section class="bg-accent" id="header">
        <div class="container">
            <div class="search-box-wrap-layout3">
                <div class="search-box-layout1">
                    <form action="#">
                        <div class="row no-gutters">
                            <div class="col-lg-2 form-group">
                                <div class="input-search-btn search-category">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <label>选择数据</label>
                                </div>
                            </div>
                            <div class="col-lg-3 form-group">
                                <div class="input-search-btn search-category">
                                    <select id="data" v-model="dataSelected" class="custom-select">
                                        <option v-for="(item,i) in datatype" v-bind:value="item.value">{{item.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 form-group">
                                <div class="input-search-btn search-category">
                                    <i class="fas fa-tags"></i>
                                    <label>选择年份</label>
                                </div>
                            </div>
                            <div class="col-lg-3 form-group">
                                <div class="input-search-btn search-category">
                                    <select id="year" v-model="yearSelected" class="custom-select">
                                        <option v-for="(item,i) in yearSeries" v-bind:value="item.value">{{item.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-lg-2 form-group">
                                <button class="submit-btn" onclick="submit1()"><i class="fas fa-search"></i>Search</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!--=====================================-->
    <!--=          Product Start         =-->
    <!--=====================================-->
    <section class="product-inner-wrap-layout1 bg-accent">
        <div class="container">
            <div class="row">
                <div class="col-xl-3 col-lg-4 sidebar-break-md sidebar-widget-area" id="accordion">
                    <div class="widget-bottom-margin-md widget-accordian widget-filter">
                        <h3 class="widget-bg-title">Data Frame</h3>
                        <div id="tableDiv1" class="tableDiv">
                            <table class="table table-responsive table-hover" id="table1">

                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-xl-9 col-lg-8">
                    <div class="product-filter-heading">
                        <div class="row align-items-center">
                            <div class="col-md-6">
                                <h2 class="item-title">Visualization Charts</h2>
                            </div>
                            <div class="col-md-6 d-flex justify-content-md-end justify-content-center">
                                <div class="product-sorting">
                                    <div class="layout-switcher">
                                        <ul>
                                            <li>
                                                <a href="#" data-type="product-box-list" class="product-view-trigger">
                                                    <i class="fas fa-th-list"></i>
                                                </a>
                                            </li>
                                            <li class="active">
                                                <a class="product-view-trigger" href="#" data-type="product-box-grid">
                                                    <i class="fas fa-th-large"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="product-view" class="product-box-grid">
                        <div class="row">
                            <div class="col-xl-12 col-md-12">
                                <div class="product-grid-view">
                                    <div class="grid-view-layout1">
                                        <div class="product-box-layout1 top-rated-grid">
                                            <div class="item-img">
                                                <div id="map" class="map" style="height: 500px;width: 100%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-12 col-md-12">
                                <div class="product-grid-view">
                                    <div class="grid-view-layout1">
                                        <div class="product-box-layout1 top-rated-grid">
                                            <div class="item-img">
                                                <div id="bar" class="bar" style="height: 500px;width: 100%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-12">
                                <div class="product-grid-view">
                                    <div class="grid-view-layout1">
                                        <div class="product-box-layout1">
                                            <div class="item-img">
                                                <div id="bar_top" class="bar_top" style="height: 500px;width: 100%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-6 col-md-12">
                                <div class="product-grid-view">
                                    <div class="grid-view-layout1">
                                        <div class="product-box-layout1">
                                            <div class="item-img">
                                                <div id="pie_top" class="pie_top" style="height: 500px;width: 100%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="pagination-layout1">
        <div class="btn-prev">
            <a href="/"><i class="fas fa-angle-double-left"></i>Previous</a>
        </div>
        <div class="page-number">
            <a href="/">1</a>
            <a href="/area" class="active">2</a>
            <a href="/year">3</a>
            <a href="/websites">4</a>
            <a href="/news">5</a>
        </div>
        <div class="btn-next">
            <a href="/year">Next<i class="fas fa-angle-double-right"></i></a>
        </div>
    </div>
    <!--=====================================-->
    <!--=       Footer Start           	=-->
    <!--=====================================-->
    <footer>
        <div class="footer-top-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-box-layout1">
                            <div class="footer-logo">
                                <img src="media/logo.png" alt="logo">
                            </div>
                            <p>这是一个数据统计可视化网站，主要展示中国近年来的统计数据，以及相关的新闻和网站</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-box-layout1">
                            <div class="footer-title">
                                <h3>网站制作人</h3>
                            </div>
                            <div class="footer-menu-box">
                                <ul>
                                    <li><a href="#">Silence Li</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-box-layout1">
                            <div class="footer-title">
                                <h3>所属单位</h3>
                            </div>
                            <div class="footer-menu-box">
                                <ul>
                                    <li><a href="#">武汉大学</a></li>
                                    <li><a href="#">遥感信息工程学院</a></li>
                                    <li><a href="#">地理信息工程GIS</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6">
                        <div class="footer-box-layout1">
                            <div class="footer-title">
                                <h3>联系方式</h3>
                            </div>
                            <div class="footer-menu-box">
                                <ul>
                                    <li><a href="#">QQ：2118656521</a></li>
                                    <li><a href="#">邮箱：</a></li>
                                    <li><a href="#">2118656521@qq.com</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-bottom-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <div class="copyright-text">
                            Copyright &copy; Wuhan University All rights reserved.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!--=====================================-->
    <!--=       Modal Start           	 	=-->
    <!--=====================================-->
    <div class="modal fade modal-location" id="modal-location" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                    <span class="fas fa-times" aria-hidden="true"></span>
                </button>
                <div class="location-list">
                    <h4 class="item-title">Location</h4>
                    <ul>
                        <li><a href="#">California</a></li>
                        <li><a href="#">Kansas</a></li>
                        <li><a href="#">Louisiana</a></li>
                        <li><a href="#">New Jersey</a></li>
                        <li><a href="#">New York</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade modal-location" id="modal-category" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <button type="button" class="close modal-close" data-dismiss="modal" aria-label="Close">
                    <span class="fas fa-times" aria-hidden="true"></span>
                </button>
                <div class="location-list">
                    <h4 class="item-title">Category</h4>
                    <ul>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category5.png" alt="icon"></span>Business &amp; Industry</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category7.png" alt="icon"></span>Cars &amp; Vehicles</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category14.png" alt="icon"></span>Electronics</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category4.png" alt="icon"></span>Health &amp; Beauty</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category18.png" alt="icon"></span>Hobby, Sport &amp; Kids</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category8.png" alt="icon"></span>Home Appliances</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category6.png" alt="icon"></span>Jobs</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category12.png" alt="icon"></span>Others</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category11.png" alt="icon"></span>Pets &amp; Animals</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category3.png" alt="icon"></span>Property</a>
                        </li>
                        <li>
                            <a href="#"><span class="item-icon"><img src="media/category/category1.png" alt="icon"></span>Services</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- Jquery Js -->
<script src="dependencies/jquery/js/jquery.min.js"></script>
<!-- Popper Js -->
<script src="dependencies/popper.js/js/popper.min.js"></script>
<!-- Bootstrap Js -->
<script src="dependencies/bootstrap/js/bootstrap.min.js"></script>
<!-- Waypoints Js -->
<script src="dependencies/waypoints/js/jquery.waypoints.min.js"></script>
<!-- Counterup Js -->
<script src="dependencies/jquery.counterup/js/jquery.counterup.min.js"></script>
<!-- Owl Carousel Js -->
<script src="dependencies/owl.carousel/js/owl.carousel.min.js"></script>
<!-- ImagesLoaded Js -->
<script src="dependencies/imagesloaded/js/imagesloaded.pkgd.min.js"></script>
<!-- Isotope Js -->
<script src="dependencies/isotope-layout/js/isotope.pkgd.min.js"></script>
<!-- Animated Headline Js -->
<script src="dependencies/jquery-animated-headlines/js/jquery.animatedheadline.min.js"></script>
<!-- Magnific Popup Js -->
<script src="dependencies/magnific-popup/js/jquery.magnific-popup.min.js"></script>
<!-- ElevateZoom Js -->
<script src="dependencies/elevatezoom/js/jquery.elevateZoom-2.2.3.min.js"></script>
<!-- Bootstrap Validate Js -->
<script src="dependencies/bootstrap-validator/js/validator.min.js"></script>
<!-- Meanmenu Js -->
<script src="dependencies/meanmenu/js/jquery.meanmenu.min.js"></script>
<!-- Google Map js -->
<!--    <script src="https://ditu.google.cn/maps/api/js?key=AIzaSyBtmXSwv4YmAKtcZyyad9W7D4AC08z0Rb4"></script>-->
<!-- Site Scripts -->
<script src="assets/js/app.js"></script>

<script th:src="@{js/vue.js}" type="text/javascript"></script>
<script src="js/echarts.js" type="text/javascript"></script>
<script src="js/china.js" type="text/javascript"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" th:inline="javascript">

    let maxValue=[[${maxValue.data}]];
    let minValue=[[${minValue.data}]];
    let title=[[${title}]];
    let unit=[[${unit}]]

    let chart1=echarts.init(document.getElementById('map'));
    let option1={
        title:{text:title,x:'center'},
        tooltip:{
            trigger:'item',
            formatter:'{b}<br/>{c}'+unit
        },
        toolbox:{
            show:true,
            orient:'vertical',
            left:'right',
            top:'center',
            feature:{
                dataView: {},
                restore:{},
                saveAsImage: {}
            }
        },
        visualMap:{
            min:maxValue,
            max:minValue,
            text:['高','低'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
        series:[
            {
                name:title,
                type:'map',
                map:'china',
                roam:false,
                label: {
                    show: true
                },
                data:[],
                nameMap:{
                    '西藏':'西藏自治区',
                    '青海':'青海省',
                    '宁夏':'宁夏回族自治区',
                    '海南':'海南省',
                    '甘肃':'甘肃省',
                    '贵州':'贵州省',
                    '新疆':'新疆维吾尔自治区',
                    '云南':'云南省',
                    '重庆':'重庆市',
                    '吉林':'吉林省',
                    '山西':'山西省',
                    '天津':'天津市',
                    '江西':'江西省',
                    '广西':'广西壮族自治区',
                    '陕西':'陕西省',
                    '黑龙江':'黑龙江省',
                    '内蒙古':'内蒙古自治区',
                    '安徽':'安徽省',
                    '北京':'北京市',
                    '福建':'福建省',
                    '上海':'上海市',
                    '湖北':'湖北省',
                    '湖南':'湖南省',
                    '四川':'四川省',
                    '辽宁':'辽宁省',
                    '河北':'河北省',
                    '河南':'河南省',
                    '浙江':'浙江省',
                    '山东':'山东省',
                    '江苏':'江苏省',
                    '广东':'广东省'
                }
            }
        ]
    };
    chart1.setOption(option1);

    let chart2=echarts.init(document.getElementById('bar'));
    let option2={
        title:{text:title,x:'center'},
        tooltip:{
            trigger:'item',
            formatter:'{b}<br/>{c}'+unit
        },
        grid:{
            bottom:'30%'
        },
        toolbox:{
            show:true,
            orient:'vertical',
            left:'right',
            top:'center',
            feature:{
                dataView: {},
                restore:{},
                saveAsImage: {},
                magicType: {
                    type:['line','bar']
                }
            }
        },
        xAxis: {
            type: 'category',
            axisLabel:{
                interval:0,
                formatter: function (value) {
                    return value.split("").join("\n");
                }
            }
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };
    chart2.setOption(option2);

    let chart3=echarts.init(document.getElementById('bar_top'));
    let option3={
        title:{text:title,x:'center',subtext: 'TOP 10'},
        tooltip:{
            trigger:'item',
            formatter:'{b}<br/>{c}'+unit
        },
        grid:{
            left:'15%'
        },
        toolbox:{
            show:true,
            orient:'vertical',
            left:'right',
            top:'center',
            feature:{
                dataView: {},
                restore:{},
                saveAsImage: {},
                magicType: {
                    type:['line','bar']
                }
            }
        },
        yAxis: {
            type: 'category',
            axisLabel:{
                interval:0,
            }
        },
        xAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
    };
    chart3.setOption(option3);

    let chart4=echarts.init(document.getElementById('pie_top'));
    let option4={
        title:{text:title,x:'center',subtext: 'TOP 10'},
        tooltip:{
            trigger:'item',
            formatter:'{b}<br/>{c}'+unit
        },
        legend: {
            // orient: 'vertical',
            // top: 'middle',
            bottom: 10,
            left: 'center',
            data: []
        },
        series: [{
            type: 'pie',
            center:['50%','50%'],
            selectedMode:'single',
            data:[]
        }],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    };
    chart4.setOption(option4);

    let dataSelected=[[${dataSelected}]];
    let yearSelected=[[${yearSelected}]];

    $.ajax({
        type: "GET",
        url:"/getData",
        data:"dataSelected="+dataSelected+"&yearSelected="+yearSelected,
        datatype: "json",
        success:function (result) {
            if(result[0]){
                let name1=[];
                for(let i=0;i<result[0].length;i++){
                    name1[i]=result[0][i].name;
                }
                chart1.setOption({
                    series:[{
                        data:result[0]
                    }]
                });
                chart2.setOption({
                    xAxis:{
                        data:name1
                    },
                    series:[{
                        type:'bar',
                        data:result[0]
                    }]
                });

                $(function () {
                    let html="";
                    html+="<thead>";
                    html+=      "<tr>";
                    html+=          "<td>"+"地区"+"</td>";
                    html+=          "<td>"+"数据"+"</td>";
                    html+=      "</tr>";
                    html+="</thead>";
                    html+="<tbody>";
                    for(let i=0;i<result[0].length;i++){
                        html+="<tr>";
                        html+=    "<td>"+result[0][i].name+"</td>";
                        html+=    "<td>"+result[0][i].value+"</td>";
                        html+="</tr>";
                    }
                    html+="</tbody>";
                    $("#table1").html(html);
                });

                console.log(name1);
                console.log(result);
            }

        }
    });

    $.ajax({
        type: "GET",
        url:"/getDataTop",
        data:"dataSelected="+dataSelected+"&yearSelected="+yearSelected,
        datatype: "json",
        success:function (result) {
            if(result[0]){
                let name1=[];
                for(let i=0;i<result[0].length;i++){
                    name1[i]=result[0][i].name;
                }
                chart3.setOption({
                    yAxis:{
                        data:name1
                    },
                    series:[{
                        type:'bar',
                        data:result[0]
                    }]
                });
                chart4.setOption({
                    legend:{
                        data:name1
                    },
                    series:[{
                        data:result[0]
                    }]
                })
                console.log(result);
            }

        }
    });

    function submit1() {
        let dataSelected=vue_year.$data.dataSelected;
        let yearSelected=vue_year.$data.yearSelected;

        $.ajax({
            type: "GET",
            url:"/getData",
            data:"dataSelected="+dataSelected+"&yearSelected="+yearSelected,
            datatype: "json",
            success:function (result) {
                if(result){
                    let name1=[];
                    for(let i=0;i<result[0].length;i++){
                        name1[i]=result[0][i].name;
                    }
                    chart1.setOption({
                        title:{
                          text:result[3]
                        },
                        tooltip:{
                            trigger:'item',
                            formatter:'{b}<br/>{c}'+result[4]
                        },
                        visualMap:{
                            max:result[1].data,
                            min:result[2].data
                        },
                        series:[{
                            name:result[3],
                            data:result[0]
                        }]
                    });
                    chart2.setOption({
                        title:{
                            text:result[3]
                        },
                        tooltip:{
                            trigger:'item',
                            formatter:'{b}<br/>{c}'+result[4]
                        },
                        xAxis:{
                            data:name1
                        },
                        series:[{
                            type:'bar',
                            data:result[0]
                        }]
                    });

                    $(function () {
                        $("#table1").empty();
                        let html="";
                        html+="<thead>";
                        html+=      "<tr>";
                        html+=          "<td>"+"地区"+"</td>";
                        html+=          "<td>"+"数据"+"</td>";
                        html+=      "</tr>";
                        html+="</thead>";
                        html+="<tbody>";
                        for(let i=0;i<result[0].length;i++){
                            html+="<tr>";
                            html+=    "<td>"+result[0][i].name+"</td>";
                            html+=    "<td>"+result[0][i].value+"</td>";
                            html+="</tr>";
                        }
                        html+="</tbody>";
                        $("#table1").html(html);
                    });
                    console.log(name1);
                    console.log(result);
                }

            }
        });

        $.ajax({
            type: "GET",
            url:"/getDataTop",
            data:"dataSelected="+dataSelected+"&yearSelected="+yearSelected,
            datatype: "json",
            success:function (result) {
                if(result){
                    let name1=[];
                    for(let i=0;i<result[0].length;i++){
                        name1[i]=result[0][i].name;
                    }
                    chart3.setOption({
                        title:{
                            text:result[1]
                        },
                        tooltip:{
                            trigger:'item',
                            formatter:'{b}<br/>{c}'+result[2]
                        },
                        yAxis:{
                            data:name1
                        },
                        series:[{
                            type:'bar',
                            data:result[0]
                        }]
                    });
                    chart4.setOption({
                        title:{
                            text:result[1]
                        },
                        tooltip:{
                            trigger:'item',
                            formatter:'{b}<br/>{c}'+result[2]
                        },
                        legend:{
                            data:name1
                        },
                        series:[{
                            data:result[0]
                        }]
                    });
                    console.log(result);
                }

            }
        });
    }


</script>

<script>
    let vue_year=new Vue({
        el:"#header",
        data:{
            dataSelected:"",
            yearSelected:"",
            datatype:[
                {name:"地区生产总值",value:"total_value"},
                {name:"人口",value:"population"},
                {name:"人均生产总值",value:"per_value"},
                {name:"人均工资",value:"salary"},
                {name:"人均可支配收入",value:"dis_income"},
                {name:"人均消费支出",value:"consumption"},
                {name:"高校数",value:"total_school"},
                {name:"教育经费",value:"edu_fee"}
            ],
            yearSeries:[
                {name:"2010",value:"y2010"},
                {name:"2011",value:"y2011"},
                {name:"2012",value:"y2012"},
                {name:"2013",value:"y2013"},
                {name:"2014",value:"y2014"},
                {name:"2015",value:"y2015"},
                {name:"2016",value:"y2016"},
                {name:"2017",value:"y2017"},
                {name:"2018",value:"y2018"},
                {name:"2019",value:"y2019"}
            ],
        },
        created(){
            this.yearSelected=this.yearSeries[this.yearSeries.length-1].value;
            this.dataSelected=this.datatype[0].value;
        },
        methods:{
        }
    })
</script>


</body>

</html>